const inputOne = document.querySelector("#inputOne");
const inputOneLabel = document.querySelector("#inputOneLabel");
const splitLabelOne = Splitting({ target: inputOneLabel, by: "chars" })[0]
.chars;
const inputTwo = document.querySelector("#inputTwo");
const inputTwoLabel = document.querySelector("#inputTwoLabel");
const splitLabelTwo = Splitting({ target: inputTwoLabel, by: "chars" })[0]
.chars;
const inputThree = document.querySelector("#inputThree");
const inputThreeLabel = document.querySelector("#inputThreeLabel");
const splitLabelThree = Splitting({ target: inputThreeLabel, by: "chars" })[0]
.chars;
let sineMeUp = false;
const sineCharacters = [];
inputOne.addEventListener("focus", animateInputOne);
inputOne.addEventListener("blur", deanimateInputOne);
inputTwo.addEventListener("focus", animateInputTwo);
inputTwo.addEventListener("blur", deanimateInputTwo);
inputThree.addEventListener("focus", () => {
sineMeUp = true;
animateInputThree([...sineCharacters]);
});
inputThree.addEventListener("blur", () => {
sineMeUp = false;
deanimateInputThree();
});
function animateInputOne() {
const charDistance = inputOne.clientWidth / 4;
let count = 0;
let charStart = 0;
